<template>
  <div class="square-recommand">
    <p class="maintitle">你可能还喜欢</p>
    <div class="contain">
      <div class="box" v-for="(item,index) of lists" :key="index"
      @click="chooserecommand(index)">
        <div class="box-top">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="box-bottom">
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "SquareRecommand",
        props:{
            lists:{
                types: Array,
                default(){
                    return[]
                },
            },
        },
        data(){
          return{

          }
        },
        methods:{
            chooserecommand(index){
                // console.log(this.lists[index].id)
                this.$router.push('/songlist/' + this.lists[index].id)
            }
        },

    }
</script>

<style scoped>
  .square-recommand{
    width: 100%;
    /*background-color: yellow;*/
  }

  .maintitle{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
  }

  .contain{
    margin-top: 8px;
    width: 100%;
    display: grid;
    overflow: hidden;
    grid-template-columns: 33% 33% 33%;
    grid-row-gap:10px;
    text-align: center;
  }

  .box{

  }

  .box-top{
    width: 100%;
  }

  .box-top img{
    border-radius: 10px;
    width: 90%;
    height: 90%;
  }

  .box-bottom{
    width: 100%;
  }

  .box-bottom p{
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;

    word-break: break-all;
    display: -webkit-box; /**对象作为伸缩盒子模型展示**/
    -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
    -webkit-line-clamp: 2; /**显示的行数**/
    overflow: hidden; /**隐藏超出的内容**/
  }

</style>